<template>
    <div>
         <!-- 面包屑导航 -->
        <bread></bread>
        <!-- 添加按钮 -->
        <el-button @click="addDialog"  plain class="btn" type="primary" size="small">添加</el-button>
        <!-- 表格 -->
        <v-list @edit="edit"></v-list>
        <!-- 弹窗 -->
        <v-dialog @close="close" ref="dialog" :info="info"></v-dialog>
    </div>
</template>

<script>
//引入list组件
import vList from './list.vue'
//引入弹框组件
import vDialog from './dialog.vue'
export default {
    data() {
        return {
            info:{ // 控制弹窗显示和弹窗标题字样
                isShow:false,
                win:true
            }
        };
    },
    components:{
        vList,
        vDialog
    },
    methods:{
        // 添加按钮事件：控制弹窗显示与标题
        addDialog(){
            this.info.isShow = true
            this.info.win = true
        },
        // 子组件编辑按钮（关闭弹窗）
        edit(e){  // 改变弹窗标题
        this.info.isShow = true
            this.info.win = false
            this.$refs.dialog.lookup(e)
        },
        // 子组件取消按钮（关闭弹窗）
        close(e){
            this.info.isShow = e
        }
    }
};
</script>

<style  lang="less" scoped>
.btn{
    margin: 10px 5px ;
}
</style>
